<template> 
    <h2 style="text-align: center;">用户账号信息列表</h2>
    <table style="width: 100%; text-align: center;" border="1" >
          <thead style="background-color: aqua;">
             <tr>
                <th>账号</th>
                <th>密码</th>
                <th>注册时间</th>
             </tr>
          </thead>
          <tbody>
             <tr v-for="item in info" >
                 <td>{{item.U_Name}}</td>
                 <td>{{item.U_PassWord.substring(0,4)+"***"}}</td>
                 <td>{{item.U_Date.substring(0,10)}}</td>
             </tr>
          </tbody>
    </table>
</template>

<script setup lang="ts">
import {ref,onMounted} from 'vue'
import axios from 'axios'

//创建响应式数据
const info = ref([{
    U_Name:"",
    U_PassWord:"",
    U_Date:""
}])

//生命周期函数勾
onMounted(()=>{
    LoadData();
})

//显示数据
const LoadData = ()=>{
    axios({
        url:"https://localhost:44354/api/Users/ShowUserLoginInfo",
        method:"get"
      }).then((res)=>{
           info.value = res.data;
      }).catch((err)=>{
        console.log(err);
      })
}

</script>